<template>
	<view class="content">
	    <!-- 公共组件-每个页面必须引入 -->
	    <public-module></public-module>
		<u-sticky bgColor="#fff">
				<u-tabs :list="tabs" lineColor="#FF5E01" :activeStyle="{color: '#FF5E01'}" :current="current" @change="changeTab" ref="tab" :scrollable="false">
						
				</u-tabs>
		  </u-sticky>
		  <div class="con-list-div">
				<div class="sale-list-item arrangeGoods-item" v-for="(item,index) in list" :key="item.orderId">
				  <div class="sale-top" @click="toOrder(item)" style="cursor: pointer">
					<div class="store-name">订单编号：{{item.orderSn}}</div>
				    <div class="order-state">{{item.orderStateText}}</div>
				  </div>
				  <div class="sale-con" @click="toOrder(item)" style="cursor: pointer">
					 <div class="goods-item" v-for="goodsItem in item.ordGoodsList" :key="goodsItem.goodsId">
					   <div class="goods-img">
						   <img :src="goodsItem.goodsImage" @click.stop="toGoodsInfo(goodsItem.goodsId,item)" mode="aspectFit"/>
					   </div>
					   <div class="goods-info">
						   <div class="goods-name">{{goodsItem.goodsName}}</div>
						   <div class="goods-price-num">
							   <span class="price">{{goodsItem.goodsPrice}}积分</span>
							   <span class="num">X{{goodsItem.goodsNum}}</span>
						   </div>
					   </div>
				   </div>
				  </div>
				  <div class="sale-bottom">
					<span>消耗积分：
						<span style="color:#ff9d02;font-weight: bold">{{item.orderAmount}}</span>
					</span>
				  </div>
				  <div class="sale-btn">
						<u-button text="确认收货" size="small" shape="circle" type="primary" :custom-style="style" v-if="item.orderState == 20" @click="showTake(item)"></u-button>
				  </div>
				</div>
		  </div>
		   
		  <div style="padding-bottom:40rpx;" >
			  <u-loadmore :status="status"></u-loadmore>
		  </div>
		  <u-modal :show="show" title="提示" content='确认收货后，订单完成!' showCancelButton @confirm="takeConfirm" @cancel="show=false"></u-modal>
	</view>
</template>

<script>
	import {integralOrderList,integralOrderReceipt} from '@/config/points.js'
	import {pageSeo} from '@/config/api.js'
	import store from '@/store';
	export default {
	    components:{
	     
	    },
	    data() {
	        return {
				tabs: [
					{key:' ',name:'全部'},
					{key:'0',name:'待发货'},
					{key:'20',name:'已发货'},
					{key:'30',name:'已收货'}
					],
				status: 'loadmore',
				list: [],
				pageNum: 0,
				pageSize:10,
				count:0,
				orderState:' ',
				current:0,
				style:{
					width:'160rpx',
					marginRight:'10rpx'
				},
				style2:{
					width:'160rpx',
					border:'none'
				},
				show:false,
				popOrderId:'',
				keywords:''
	        }
	    },
	    async onLoad(e) {
			await this.$onLaunched;
	        this.clearData()
	        this.getList()
	    },
		async onShow() {
		// #ifdef H5
		pageSeo({pageType: 'indexPage'}).then((res)=>{
			document.title = res.pageTitle;
		})
		// #endif	
		},
		onReachBottom() {
			if(this.list.length >= this.count) {
				this.status = 'nomore';
				return ;
			}
			this.pageNum = ++ this.pageNum;
			this.getList()
		},
	    methods: {
			showTake(item){
				this.show = true;
				this.popOrderId = item.orderId
			},
			takeConfirm(){
				let data = {};
				data.orderId = this.popOrderId;
				integralOrderReceipt(data).then(()=>{
					this.show = false;
					this.searchList();
					uni.showToast({
					  title: '确认收货完成！',
					  icon: 'none',
					  duration: 2000,
					});
				})
			},
			
			searchList(){
				this.clearData();
				this.getList()
			},
			
			changeTab(tab){
				console.log(tab)
				this.orderState = tab.key
				this.clearData()
				this.getList()
			},
			
			toOrder(item){
				uni.navigateTo({
				    url:'intergralOrderInfo?orderId='+item.orderId
				})
			},
			
			toGoodsInfo(goodsId,goodsItem){
				uni.navigateTo({
				    url:'integralGoodsInfo?goodsId='+goodsId
				})
			},
			
			
			//清除数据
			clearData(){
					this.pageNum = 1;
					this.list = [];
					this.status = 'loadmore';
					this.count = 0
			},
			getList(){
				let data = {};
				data.pageSize = 10;
				data.pageNum = this.pageNum;
				data.orderState = this.orderState;
				data.keywords = this.keywords;					
				this.status = 'loading';
			return	integralOrderList(data).then((res)=>{
					this.list = this.list.concat(res.list ? res.list : [] );
					this.count = res.count;
					if(this.list.length >= this.count) {
						this.status = 'nomore';
					}else{
						this.status = 'loadmore';
					}
				}).catch(()=>{
					this.status = 'loadmore';
				})
			},
	           
	        
	    },
	
	}
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';
.con-list-div{
    padding:8px 12px;
	.sale-list-item{
		  cursor: pointer;
		  background: #fff;
		  margin-bottom:$marginSpace;
		  border-radius: 8px;
		  font-size:$m-font;
		  line-height: 24px;
		  padding:0 16px;
		  .sale-top{
			  padding-top:5px;
			  line-height:40px;
			  border-bottom:0.8px solid $border-color;
			  @include flexbox(space-between,center);
			  .sale-compeny{
				  @include textoverflow(1);
				  padding-right:16px;
			  }
			  .sale-state{
				  color:$u-primary;
			  }
		  }
		  .sale-con{
			 padding-top:5px; 
			.goods-item{
				@include flexbox(flex-start,center);
				.goods-img{
				  width:70px;
				  height:70px;
				  img{
					width:100%;
					height:100%;
					object-fit: contain;
				  }
				}
				.goods-info{
				  padding-left:10px;
				  width:calc(100% - 70px);
				  .goods-name{
					font-size:$m-font;
					color:$font-color;
					@include textoverflow(2);
				  }
				  .goods-attr{
					margin-top:5px;
					font-size:$s-font;
					color:$g-font-color
				  }
				  .goods-price-num{
					margin-top:5px;
					@include flexbox(space-between,center);
					.price{
					  font-size:$m-font;
					  color:$font-color;
					}
					.num{
					  font-size:$s-font;
					  color:$g-font-color;
					}
				  }
				}
			  }
		  }
		  .sale-bottom{
			line-height:40px;
			text-align: right;
			color:#888;
		  }
		  .sale-btn{
			padding:10px 0;
			text-align: right;
			border-top:0.8px solid $border-color;
			overflow: hidden;
			@include flexbox(flex-end,center);
		  }

		}
}

</style>